<template>
  <div  class="assign_aler">
    <p class="aler1"><span class="Xcancle" @click="assignCancle">X</span></p>
    <br>
    <div class="left_signin">
      <div class="gantan"><span style="margin-left: 6.5px;">!</span></div>
      <span class="title_signin">签到</span>
    </div>
    <input v-model="signCode" type="text" placeholder="输入签到码" class="signininput" />
    <button @click="submitSignHandler" class="signin_btn">签到</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useCourseManageIdStore } from '@/stores/courseManageId.js';
import { useUserIdStore } from '@/stores/userId.js';
import { submitSign,getSignId } from '@/api/sign.js';
// import { getsignIdService } from '@/api/signstu.js';

const router = useRouter();
const courseManageIdStore = useCourseManageIdStore();
const userIdStore = useUserIdStore();
const signId = ref('');
const signCode = ref('');
console.log('1courseManageIdStore,userIdStore,signCode:',courseManageIdStore,userIdStore,signCode);

const getsignin = async () => {
  try {
    const courseManageId = courseManageIdStore.courseManageId;
    const response = await getSignId(courseManageId);
    console.log('1获取签到信息signId成功:', response);
    signId.value = response; 
    console.log('signId1获取签到信息signId成功:',signId.value);
  }catch (error) {
    console.error('获取签到信息失败:', error);
  }
}
getsignin();

const submitSignHandler = async () => {
  const userId = userIdStore.userId;
  const courseManageId = courseManageIdStore.courseManageId;
  const code = signCode.value;
  console.log('2获取签到信息signId成功:',signId.value);
  console.log('2courseManageIdStore,signIdStore,userIdStore,signCode:',courseManageId,signId.value,userId,code);
  try {
    await submitSign(signId.value, userId, code, courseManageId);
    ElMessage.success('签到成功');
    router.push('/student/dashboard');
  } catch (error) {
    console.error('签到失败:', error);
    ElMessage.error('签到码错误');
  }
};

const assignCancle = () => {
  router.push('/student/dashboard');
}

</script>

<style>
.assign_aler {
  position: absolute;
  top: 25%;
  left: 28%;
  width: 40lvw;
  height: 50lvh;
  background-color: rgb(255, 255, 255);
  border: 1px solid #cccccc;
  z-index: 999;
  border-radius: 15px;
}

.aler1 {
  color: #6a6969;
  font-size: 20px;
  margin-left: 2%;
  font-weight: bold;
}

.Xcancle {
  float: right;
  margin-right: 5%;
}

.Xcancle:hover {
  color: #ff0202;
  cursor: pointer;
}

.left_signin {
  display: flex;
  flex-direction: row;
}

.gantan {
  font-size: 20px;
  font-weight: 1000;
  margin-left: 20px;
  line-height: 3lvh;
  border: 3px solid #1c1c1d;
  border-radius: 50%;
  height: 3lvh;
  width: 3lvh;
}

.assign_click {
  font-size: 70px;
  font-weight: 1000;
  line-height: 30lvh;
  color: #130ff6;
  margin-left: 24lvh;
  border: 10px solid #130ff6;
  border-radius: 50%;
  height: 30lvh;
  width: 30lvh;
}

.assign_click:hover {
  border-color: #b42d2d;
  color: #b42d2d;
}

.title_signin {
  float: left;
  font-size: 22px;
  font-weight: 700;
  color: #1c1c1d;
  margin-left: 10px;
}


.signininput {
  width: 15.3lvw;
  height: 5lvh;
  border-radius: 5px;
  margin-left: 8lvw;
  margin-top: 13lvh;
  border: 1px solid #ccc;
  padding: 5px;
}

.signin_btn {
  width: 5.3lvw;
  height: 6.5lvh;
  border-radius: 5px;
  margin-left: 1lvw;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.signin_btn:hover {
  background-color: #0056b3;
}
</style>